<template>
  <div class="hello">
    <h2>normalize data</h2>
    <div class="box">
      <pre>原数据: {{before}}</pre>
      <pre>normalize之后: {{after}}</pre>
      <pre>denormalize: {{restore}}</pre>
    </div>
  </div>
</template>

<script>
import {normalize, schema, denormalize} from 'normalizr';
export default {
  name: 'HelloWorld',
  data () {
    return {
      before:'',
      after:'',
      restore:''
    }
  },
  mounted(){
    const originalData = {
      "id": "123",
      "author": {
        "id": "1",
        "name": "Paul"
      },
      "title": "My awesome blog post",
      "comments": [
        {
          "id": "324",
          "commenter": {
            "id": "2",
            "name": "Nicole"
          }
        }
      ]
    }
    // 定义 users schema
    const user = new schema.Entity('users');

    // 定义 comments schema
    const comment = new schema.Entity('comments', {
      commenter: user,
    });

    // 定义 articles schema
    const article = new schema.Entity('articles', {
      author: user,
      comments: [comment],
    });
    this.before = JSON.stringify(originalData, null, 2);
    const normalizedData = normalize(originalData, article);
    this.after = JSON.stringify(normalizedData, null, 2);
    console.log('normalizedData' , normalizedData)
    const denormalizeData = denormalize(normalizedData.result, article, normalizedData.entities);
    this.restore = JSON.stringify(denormalizeData, null, 2);
    console.log('denormalizeData', denormalizeData)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.box{
  display: flex;
  flex: auto 33%;
  text-align: initial;
}
.box pre{
  flex:1 1 33%;
  border: 1px solid red;
  margin-left: 5px;
  padding: 10px;
  box-sizing: border-box;
}
</style>
